<!DOCTYPE html>
<html>

<head>
    <title>Schema Registry UI</title>
    <link rel="shortcut icon" href="./src/assets/icons/favicon.png">
    <meta charset=utf-8/>
    <meta name="viewport" content="width=device-width">
    <meta name="keywords" content="kafka,schema registry,avro,landoop">
    <meta name="description" content="Kafka Schema Registry UI">
    <meta name="author" content="http://landoop.com">
    <script src="env.js"></script>
</head>

<body ng-app="angularAPP" ng-cloak>

    <!--Header Starts here-->
    <header class="header" ng-controller="HeaderCtrl" style="background-color:{{color}}">
        <div layout="row" layout-xs="column">
            <div flex>
                <span class="title"><a style="color:#fff;" class="md-padding" href="{{cluster ? '#/cluster/'+cluster.NAME : '#/'}}">SCHEMA REGISTRY</a></span>
            </div>

            <a style="" class="exportSchemas" ng-href="#/cluster/{{cluster.NAME}}/export">
      <i class="fa fa-download" aria-hidden="true"></i> <b>EXPORT SCHEMAS</b>
    </a>

            <label ng-show="!missingEnvJS && clusters.length > 1" class="selectClusterLabel"><b>SELECT CLUSTER :</b></label>
            <md-input-container ng-show="!missingEnvJS && clusters.length > 1" class="selectCluster">
                <md-select ng-model="connectEndPoint">
                    <md-option ng-repeat="connectEndPoint in clusters track by $index" ng-click="updateEndPoint(connectEndPoint.NAME)" value="{{connectEndPoint.NAME}}"
                        ng-selected="{{cluster.NAME == connectEndPoint.NAME}}">{{connectEndPoint.NAME}}</md-option>
                </md-select>
            </md-input-container>
        </div>
    </header>

    <div layout="row" flex="100" ng-show="missingEnvJS" ng-cloak>
        <md-card>
            <md-card-content>
                <h3 style="font-weight:300; color:red"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Missing Cluster Configuration</h3>
                <br> In order to configure <code>schema-registry-ui</code> you need to add <code>env.js</code> file in the
                root directory of the app.
                <br> Example <b>env.js</b> structure:
                <pre>
        <code>
var clusters = [
   {
       NAME:"prod",
       // Schema Registry service URL (i.e. http://localhost:8081)
       SCHEMA_REGISTRY: "http://localhost:8081", // https://schema-registry.demo.landoop.com
       COLOR: "#141414" // optional
     },
     {
       NAME:"dev",
       SCHEMA_REGISTRY: "http://localhost:8383",
       COLOR: "red", // optional
       allowGlobalConfigChanges: true, // optional
       //allowTransitiveCompatibilities: true        // if using a Confluent Platform release >= 3.1.1 uncomment this line
     }
  ];
        </code>
      </pre>
            </md-card-content>
        </md-card>
    </div>

    <!--Main Content Starts here-->
    <div layout="row" layout-margin layout-sm="column" layout-xs="column" ng-controller="SchemaRegistryConfigCtrl" ng-hide="missingEnvJS"
        style="margin-bottom:0;">
        <div flex-gt-sm="33">
            <div ng-include="'list.html'"></div>
            <br>
            <div ng-include="'config.html'" hide-sm hide-xs></div>
        </div>
        <div flex-gt-sm="66" flex style="margin-bottom:0;">
            <ng-view></ng-view>
            <div ng-include="'config.html'" show-sm hide-gt-sm></div>
        </div>
    </div>

    <!--CUSTOM-FOOTER-->    
    
    <!-- LENSES -->

    <!-- analytics -->
    <!--
<script src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-ace/ui-ace.min.js"></script>
<script src="bower_components/spin.js/spin.min.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
<script src="bower_components/angular-diff-match-patch/angular-diff-match-patch.js"></script>
<script src="bower_components/ace-diff/libs/diff_match_patch.js"></script>
<script src="bower_components/angular-json-tree/dist/angular-json-tree.min.js"></script>
<script src="bower_components/jszip/dist/jszip.min.js"></script>
<script src="bower_components/jszip/vendor/FileSaver.js"></script>
<script src="bower_components/jszip-utils/dist/jszip-utils.min.js"></script>-->


    <!-- build:js combined.js -->
    <!--<script src="src/app.js"></script>
<script src="src/schema-registry/home/home.controller.js"></script>
<script src="src/schema-registry/config/config.controller.js"></script>
<script src="src/schema-registry/view/view.controller.js"></script>
<script src="src/schema-registry/export/export.controller.js"></script>
<script src="src/schema-registry/list/list.controller.js"></script>
<script src="src/schema-registry/new/new.controller.js"></script>
<script src="src/factories/dirPagination.js"></script>
<script src="src/factories/utils-factory.js"></script>
<script src="src/factories/schema-registry-factory.js"></script>
<script src="src/factories/avro4s-factory.js"></script>
<script src="src/factories/env.factory.js"></script>
<script src="src/factories/toast-factory.js"></script>-->
    <!-- endbuild -->

</body>

</html>